<!DOCTYPE html>
<html>
  <head>
    <title>redis-stat</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="jqplot/jquery.jqplot.min.css" rel="stylesheet"/>
    <link href="select2/select2.css" rel="stylesheet"/>
    <link href="select2/select2-bootstrap.css" rel="stylesheet"/>
    <link href="css/site.css" rel="stylesheet"/>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="jqplot/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script type="text/javascript" src="jqplot/jqplot.canvasAxisTickRenderer.min.js"></script>
    <script type="text/javascript" src="select2/select2.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/site.js"></script>
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="./">redis-stat</a>
          <% if @hosts.length > 1 %>
            <ul class="nav">
              <li>
                <select id="hostlist" class="select2 input-default">
                  <option value="./"<%= ' selected' unless @selected %>>All instances</option>
                  <% @hosts.each do |host| %>
                  <option value="./?host=<%= URI.escape host %>"<%= ' selected' if @selected == host %>><%= host %></option>
                  <% end %>
                </select>
              </li>
            </ul>
          <% end %>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="span12">
          <h3>Dashboard</h3>
          <div class="alert alert-error hide">
          </div>
        </div>
      </div>

      <div class="row">
        <div id="chart1" class="span4 chart">
        </div>
        <div id="chart2" class="span4 chart">
        </div>
        <div id="chart3" class="span4 chart">
        </div>
      </div>
      <div class="row">
        <div class="span12">
          <table id="stat_table" class="table table-striped table-bordered table-condensed <%= @verbose %>">
            <thead>
              <tr>
                <% @measures.each do |m| %>
                  <th>
                    <h5 class="text-info <%= @verbose %>">
                      <a href="#" rel="tooltip" title="<%= m %>">
                        <%= RedisStat::LABELS[m] %>
                      </a>
                    </h5>
                  </th>
                <% end %>
              </tr>
            </thead>
            <tbody id="info">
              <% RedisStat::Server::STAT_TABLE_ROWS.times do %>
                <tr><td colspan="<%= @measures.length %>">&nbsp;</td></tr>
              <% end %>
            </tbody>
          </table>
        </div>
      </div>

      <div class="row">
        <div class="span12">
          <h3>Instance information</h3>
        </div>
      </div>

      <div class="row">
        <div class="span12 info-wrapper">
          <div class="span2">
            <table class="table table-striped table-condensed">
              <thead>
                <tr>
                  <th>&nbsp;</th>
                </tr>
              </thead>
              <tbody>
                <% @tab_measures.each do |stat| %>
                <tr>
                  <th><%= stat %></th>
                </tr>
                <% end %>
              </tbody>
            </table>
          </div>
          <div class="span10 scrollable">
            <table class="table table-striped table-condensed">
              <thead>
                <tr>
                  <% @hosts.each do |host| %>
                    <th class="text-info<%= ' selected' if @selected && host == @selected %>">
                      <a href="?host=<%= URI.escape host %>"><%= host %>
                    </th>
                  <% end %>
                </tr>
              </thead>
              <tbody>
                <% @tab_measures.each do |stat| %>
                <tr id="<%= stat %>">
                  <% @hosts.each do |host| %>
                  <td>
                    <%= @info[host][stat] %>
                  </td>
                  <% end %>
                </tr>
                <% end %>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>

    <footer class="footer">
      <div class="container">
        <p>Powered by <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>, <a href="http://jquery.com/">jQuery</a> and <a href="http://www.jqplot.com/">jqPlot</a>.</p>
      </div>
    </footer>

    <script>
      $(function() {
        initialize({
          selected: <%= @selected.to_json %>,
          measures: <%= @measures.to_json %>,
          colors:   <%= Hash[@measures.map { |m| [m, RedisStat::COLORS[m].join(' ')] }].to_json %>,
          history:  <%= @history.to_json %>,
          max:      <%= RedisStat::Server::HISTORY_LENGTH %>,
          fade_dur: <%= @interval < 1 ? 0 : 300 %>,
          rows:     <%= RedisStat::Server::STAT_TABLE_ROWS %>})

        $("#stat_table th a").tooltip()
        $("#hostlist").select2()
        $("#hostlist").bind('change', function() {
          window.location = $(this).val()
        })

        // TODO Check (typeof(EventSource) !== "undefined")

        var source = new EventSource("./pull")
        source.onmessage = function(e) {
          var alert = $(".alert");
          var json = JSON.parse(e.data);
          if (json.error && json.error.length > 0) {
            alert.html(
              $.map(json.error, function(e, _) {
                return "<h4>" + e + "</h4>";
              }).join(''));
            alert.fadeIn();
          } else {
            alert.fadeOut();
          }
          if (appendToHistory(json)) {
            updateTable()
            updatePlot()
          }
        }
        <% unless RUBY_PLATFORM == 'java' %>
        source.onerror = function(e) {
          var alert = $(".alert");
          alert.html("<h4>Lost connection to redis-stat</h4>");
          alert.fadeIn();
          // source.close()
        }
        <% end %>
      })
    </script>
  </body>
</html>
